<template>
  <div>
    <p>
      <span style="font-size: 30px">我的收藏</span>
    </p>
    <div style="margin-top: 30px;margin-left: 30px">
      <el-table :data="collectionList" stripe style="width: 1000px">
        <el-table-column prop="flowerName" label="鲜花名称" width="180" align="center">
          <template slot-scope="scope">
            <a @click="toFlower(scope.row.flowerId)">{{ scope.row.flowerName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="flowerImg" label="鲜花示例图" width="180" align="center">
          <template slot-scope="scope">
            <img :src="'http://localhost:8088/image'+scope.row.flowerImg" style="width: 150px; height: 150px;"
                 alt="flowerImg">
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="鲜花种类" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="收藏时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteCollectionById(scope.row.flowerId)">取消收藏</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页插件-->
    <div class="block" style="margin-left: 350px;margin-top: 100px;margin-bottom: 80px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=pageNum
          :page-sizes="[5,10]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {Message} from "element-ui";

export default {
  name: "CollectionView",
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,

      accountId: '2',
      accountName: 'jack',

      collectionList: [],
    }
  },
  created() {
    this.getLogin();
    this.selectAllCollectionByAccountId();
  },
  methods: {
    getLogin() {
      this.accountId = sessionStorage.getItem("accountId")
      this.accountName = sessionStorage.getItem("accountName")
    },
    // 根据用户id查看所有的收藏
    selectAllCollectionByAccountId() {
      this.$axios.get("/flowerCollection/selectAllCollectionByAccountId", {
        params: {
          accountId: this.accountId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then(res => {
        this.collectionList = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    // 分页相关
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectAllCollectionByAccountId();
      this.pageNum = 1;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.selectAllCollectionByAccountId();
      this.pageNum = 1;
    },
    // 删除收藏
    deleteCollectionById(flowerId) {
      let params = new URLSearchParams;
      params.append('flowerId', flowerId);
      params.append("accountId", this.accountId);
      this.$axios.post("/flowerCollection/deleteCollection", params)
          .then(res => {
            if (res.data.code == 200) {
              Message({
                type: 'success',
                message: res.data.msg,
                duration: 1000
              });
              this.selectAllCollectionByAccountId()
            } else {
              Message({
                type: 'error',
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },
    // 跳转到相关鲜花页面
    toFlower(flowerId) {
      sessionStorage.setItem("flowerId", flowerId);
      this.$router.push({path: '/flower'})
    },
  },
}
</script>
<style scoped>
a:hover {
  color: #409eff; /* 改变颜色，这应该是你的主题颜色 */
  text-decoration: underline; /* 下划线 */
  cursor: pointer;
}
</style>

